<template>
	<view id='asset_account_container'>
		<!-- 名称表单 -->
		<view class="my_form">
			<uni-forms :modelValue="formData" label-position="left" label-align="right">
				<!-- 类型选择 -->
				<uni-forms-item label="类型:" name="type" >
					<uni-data-select
					    v-model="formData.type"
					    :localdata="typeData"
						placeholder="选择账户类型"
					    @change="typeChange"
					    >		
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="卡号:" name="cardNumber" v-if="showCardInput">
					<uni-easyinput type="number" v-model="formData.cardNumber" placeholder="请输入银行卡号" />
				</uni-forms-item>
				<uni-forms-item label="账户名:" name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入账户名称" />
				</uni-forms-item>
				<uni-forms-item label="余额:" name="balance">
					<uni-easyinput type="digit" v-model="formData.balance" placeholder="请输入账户余额" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- 删除账户按钮 -->
		<view class="option_delete" @click="deleteHandle" v-if="currentOps == 'edi'">
			<view class="option_delete_left">删除账本</view>
			<view class="option_delete_right">
				<image src="../../static/common/right.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 保存按钮 -->
		<view class="confirm_btn">
			<button
				type="default" 
				style="background-color: #efa31f; color: #fff;"
				@click="addBookHandle"
				>
				保存
			</button>
		</view>
	</view>
</template>


<script setup>
import {ref, onMounted} from 'vue';
import { onLoad } from "@dcloudio/uni-app"

// 当前操作 add-新增 edi-编辑
let currentOps = ref("add");
// 展示卡号标识
let showCardInput = ref(false);

// 表单数据
let formData = ref({
	type: "",
	cardNumber: "",
	name: "",
	balance:""
})

// 账户类型选择数据
let typeData = ref([
	{ value: 1, text: "现金" },
	{ value: 2, text: "微信" },
	{ value: 3, text: "支付宝" },
	{ value: 4, text: "银行卡" }
])

onLoad((options)=>{
	currentOps.value = options.ops
	if(options.ops == "edi"){
		// 编辑，将账户数据赋值显示
		let assetAccountD =  JSON.parse(options.data);
		uni.setNavigationBarTitle({
			title:"编辑资产账户"
		})
		
		// 判断类型是否为银行卡，是否显示卡号输入框
		if(assetAccountD.type == 4){
			showCardInput.value = true;
		}else{
			showCardInput.value = false;
		}
		
		// 赋值显示已有数据
		formData.value = assetAccountD;
		
		console.log("接收到编辑的数据：", formData.value);
		return 1;
	}
	
	uni.setNavigationBarTitle({
		title:"新增资产账户"
	})

})

// 保存处理器
function addBookHandle(){
	// 判空，如果没有选择了银行卡，则不需要判断卡号是否为空
	for (let key in formData.value) {
		if(formData.value.type == 4 && formData.value[key] == ""){
			uni.$showT("请填写完整")
		}else if(key != "cardNumber" &&  formData.value[key] == ""){
			uni.$showT("请填写完整")
		}
	}
	
	// 兼容性处理
	if(formData.value.type != 4){
		formData.value.cardNumber = "";
	}
	
	// 分发新增或编辑逻辑
	if(currentOps.value == "add"){
		execteAdd();
		return 1;
	}
	execteEdite()
}

// 新增执行器
async function execteAdd(){
	// 构建图标字段
	let icon = "";
	switch(formData.value.type){
		case 1:
			icon = "cash.png";
			break; 
		case 2:
			icon = "wechat.png";
			break;
		case 3:
			icon = "alipay.png";
			break;
		case 4:
			icon = "card.png";
			break;
	}
	formData.value['icon'] = icon;
	
	// 补充用户ID字段
	formData.value['userId'] = JSON.parse(uni.getStorageSync("userInfo")).id;
	
	const res = await uni.$http.post("/assetAccounts", formData.value);
	
	if(res.data.code == 0){
		uni.$showT(res.data.msg);
		return 0;
	}
	
	uni.$showT("新增成功，即将跳转...");
	setTimeout(()=>{
		uni.navigateBack();
	}, 1500)
	
}

// 编辑执行器
async function execteEdite(){
	const res = await uni.$http.put("/assetAccounts", formData.value);
	
	if(res.data.code == 0){
		uni.$showT(res.data.msg);
		return 0;
	}
	
	uni.$showT("修改成功，即将跳转...");
	setTimeout(()=>{
		uni.navigateBack();
	}, 1500)
}

// 类型选择触发
function typeChange(e){
	// 判断是否选择了银行卡类型，如果选择了银行卡类型显示卡号输入框
	console.log("选择：", e);
	if(e == 4){
		showCardInput.value = true;
		return 1;
	}
	showCardInput.value = false;
}

// 删除资产账户处理器
function deleteHandle(){
	// 二次确定
	uni.showModal({
		title: '提示',
		content: '删除操作不可逆，请再次确定是否删除？',
		success: function (res) {
			if (res.confirm) {
				deleteExecute();
			} else if (res.cancel) {
				uni.$showT('取消删除操作');
			}
		}
	});
}

async function deleteExecute(){
	// 执行删除
	const res = await uni.$http.delete(`/assetAccounts/${formData.value.id}`);
	if(res.data.code == 0){
		uni.$showT(res.data.msg);
		return 0;
	}
	
	uni.$showT("删除成功，即将跳转...");
	setTimeout(() => {
		uni.navigateBack();
	}, 1500);
}
</script> 


<style lang ='scss' scoped>
#asset_account_container{
	/* background-color: #fff; */
	height: 100vh;
	box-sizing: border-box;
}

.my_form{
	box-sizing: border-box;
	background-color: #fff;
	padding: 20rpx;
	width: 97vw;
	margin: 0 auto;
	border-radius: 15rpx;
}

.confirm_btn{
	position: fixed;
	bottom: 0px;
	width: 100vw;
}

.confirm_btn button{
	width: 97%;
}

.option_delete{
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	padding: 20rpx 20rpx;
	background-color: #fff;
	font-size: 14px;
	color: red;
	width: 97vw;
	margin: 0 auto;
	margin-top: 10rpx;
	border-radius: 15rpx;
}

.option_delete_right image{
	width: 25px;
	
}


</style>